/**
 * Created by imac13 on 19/1/6.
 */
import React,{ Component } from 'react';
import { Card,Form, Input, Radio,Select,Switch, DatePicker,TimePicker,Upload,Icon,InputNumber, Row, Col, Checkbox, Button, AutoComplete,message} from 'antd';
import moment from 'moment';
const Option = Select.Option;
// const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class FormRegister extends Component {
    state={};
    getBase64 = (img, callback)=> {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    };
    handleSubmit = ()=> {
        let userInfo = this.props.form.getFieldsValue();
        console.log(JSON.stringify(userInfo));
        this.props.form.validateFields((err, values) => {
            if (!err) {
                message.success(`${userInfo.username} 恭喜你，您通过本次注册表单学习，密码是${userInfo.password}`)
            }
        })
    };
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 12,
                    offset: 4,
                },
            },
        };
        return(
            <div>
                <Card title="注册表单" className="card-wrapper">
                    <Form>
                        <Form.Item label="用户名" {...formItemLayout}>
                            {
                                getFieldDecorator('username',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'用户名不能为空'
                                        },
                                    ]
                                })(<Input placeholder="Username" />)
                            }
                        </Form.Item>
                        <Form.Item label="密码" {...formItemLayout}>
                            {
                                getFieldDecorator('password',{
                                    initialValue:'',
                                    rules:[]
                                })(<Input  type="password" placeholder="Password" />)
                            }
                        </Form.Item>
                        <Form.Item label="性别" {...formItemLayout}>
                            {
                                getFieldDecorator('sex',{
                                    initialValue:'1',
                                })(
                                    <Radio.Group>
                                       <Radio value="1">男</Radio>
                                       <Radio value="2">女</Radio>
                                    </Radio.Group>
                                )
                            }
                        </Form.Item>
                        <Form.Item label="年龄" {...formItemLayout}>
                            {
                                getFieldDecorator('age',{
                                    initialValue:'18',
                                })(
                                    <InputNumber />,
                                )
                            }
                        </Form.Item>
                        <Form.Item label="当前状态" {...formItemLayout}>
                            {
                                getFieldDecorator('status',{
                                    initialValue:'lucy',
                                })(
                                    <Select style={{ width: 120 }}>
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                    </Select>
                                )
                            }
                        </Form.Item>
                        <Form.Item label="爱好" {...formItemLayout}>
                            {
                                getFieldDecorator('hobby',{
                                    initialValue:['2','10'],
                                })(
                                    <Select mode="multiple">
                                        <Option value="1">看电影</Option>
                                        <Option value="2">听音乐</Option>
                                        <Option value="3">打游戏</Option>
                                        <Option value="4">唱歌</Option>
                                        <Option value="5">吃饭</Option>
                                        <Option value="6">看电视</Option>
                                        <Option value="7">玩</Option>
                                        <Option value="8">写作</Option>
                                        <Option value="9">英语</Option>
                                        <Option value="10">学习</Option>
                                    </Select>
                                )
                            }
                        </Form.Item>
                        <Form.Item label="是否毕业" {...formItemLayout}>
                            {
                                getFieldDecorator('switchG',{
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(<Switch />)
                            }
                        </Form.Item>
                        <Form.Item label="生日" {...formItemLayout}>
                            {
                                getFieldDecorator('birthday',{
                                    initialValue:moment('2019-01-06'),
                                })(
                                    <DatePicker />
                                )
                            }
                        </Form.Item>
                        <Form.Item label="联系地址" {...formItemLayout}>
                            {
                                getFieldDecorator('address',{
                                    initialValue: '安徽省合肥市巢湖市巢湖学院',
                                })(
                                    <Input.TextArea autosize={{minRows: 2, maxRows: 6}} />
                                )
                            }
                        </Form.Item>
                        <Form.Item label="早起时间" {...formItemLayout}>
                            {
                                getFieldDecorator('earlytime',{
                                    initialValue:moment('07:30:00', 'HH:mm:ss'),
                                })(
                                    <TimePicker />
                                )
                            }
                        </Form.Item>
                        <Form.Item label="头像" {...formItemLayout}>
                            {
                                getFieldDecorator('imageUrl',{
                                    initialValue:'',
                                })(
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        showUploadList={false}
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        onChange={this.handleChange}
                                    >
                                        {this.state.imageUrl ? <img src={this.state.imageUrl} alt="avatar" /> : <Icon type="plus" />}
                                    </Upload>
                                )
                            }
                        </Form.Item>
                        <Form.Item {...tailFormItemLayout}>
                            {
                                getFieldDecorator('agreement',{
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>我已阅读过<a href="#">Imooc慕课协议</a></Checkbox>
                                )
                            }
                        </Form.Item>
                        <Form.Item {...tailFormItemLayout}>
                            <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        )
    }
}

export default Form.create()(FormRegister);